<template>
  <n-card :style="{ width: '240px', margin: '10px', border: '1px solid #e0e0e0', backgroundColor: '#fff' }">
    <n-space vertical>
      <n-tag>{{ uploadTime }}</n-tag>
      <svg viewBox="0 0 100 100" width="100%" height="100%">

        <text x="80" y="4" class="svg-title">API-Cloud</text>
        <image :href="imageSrc" width="100%" height="100%" />
      </svg>
      <div class="caption">
        <h3>{{ name }}</h3>
        <p class="fzs-tip">{{ truncatedTip }}</p>
        <div class="tags" v-if="interfaceLabelList && interfaceLabelList.length">
          <n-tag v-for="(tag, index) in interfaceLabelList" :key="index" style="margin-right: 4px;">{{ tag }}</n-tag>
        </div>
        <n-space justify="space-between" style="width: 100%;">
          <n-button size="small" type="primary" @click="onlineCall(id)">在线调用</n-button>
          <n-button size="small" @click="() => alert('点击了技术文档,接口id = ' + id)">开发文档</n-button>
        </n-space>
        <div class="views">
<!--          <n-icon size="12" style="margin-right: 4px;">-->
<!--            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>-->
<!--          </n-icon>-->
          <ApiCardBottom :visitedCount="visitedCount"></ApiCardBottom>


        </div>
      </div>
    </n-space>
  </n-card>
</template>

<script setup>
import { computed } from 'vue';
import { NCard, NButton, NSpace, NIcon, NTag } from 'naive-ui';
import ApiCardBottom from '@/components/interface/ApiCardBottom.vue'
import { useRouter } from 'vue-router'

const router = useRouter()



const props = defineProps({
  id: BigInt,
  name: String,
  imageSrc: String,
  uploadTime:Date,
  description: {
    type: String,
    default: ''
  },
  visitedCount: {
    type: BigInt,
    default: 0
  },
  interfaceLabelList: {
    type: Array,
    default: () => []
  }
});

const truncatedTip = computed(() => {
  return props.description.length > 20 ? props.description.substring(0, 20) + '...' : props.description;
});


/**
 * 在线接口调用
 */
const onlineCall = function(id){
  console.log("首页点击接口在线使用时由路由传递的id参数:id = " + id)
  router.push({ name:'OnlineInvoke', params: { interfaceId: id } });
}

</script>

<style scoped>
.svg-title {
  font-size: 4px;
  font-weight: bold;
  fill: #00bdfe;
}

.caption {
  padding: 10px;
}

.glyphicon {
  font-size: 12px;
}

.views {
  margin-top: 10px;
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
}

.tags {
  margin: 10px 0;
}
</style>
